<template>
      <el-button id="addbutton" type="primary" @click="addview = true">
          新增
     </el-button>
     <el-scrollbar height="619px">

      <el-descriptions 
      v-for="(dish,index) in dishResult" 
      :key="index">
       <el-descriptions-item >    
          <el-image 
              :src=dish.image
              style="
              width:100px;
              border-radius: 10px;
              /* solt = error; */
              "/>
          </el-descriptions-item>

          <el-descriptions-item >
              <el-link  :underline="false"  @click="view" type="primary" target="_blank">{{ dish.name }}</el-link>
          </el-descriptions-item>

          <el-descriptions-item >
              <el-rate
              id="rate" 
              v-model=dish.score allow-half />
              <el-text id="nop">{{ dish.numberPeople }}人评分</el-text>

              <el-text id="score">{{ dish.averageScore }}</el-text>
              <el-text id="comment">热门评论: 尊嘟不好吃</el-text>

              <el-text id="location">新食堂</el-text>
          </el-descriptions-item>
      <el-descriptions-item>
        
        <el-button id="addbutton" type="primary" @click="remove(dish.id)">
          删除
        </el-button>
        <el-button id="addbutton" type="primary" @click="beforeupdate(dish.id)">
          修改
        </el-button>
      </el-descriptions-item>
      </el-descriptions>
      </el-scrollbar>


      <el-dialog v-model="updateview">
        <el-image src="public\bo.png"/>

        <el-form :model="updateForm">
          <el-form-item label="菜品名称">
            <el-input style="width: 220px" v-model="updateForm.name"/>
          </el-form-item>

          <el-form-item label="地点">
            <el-input style="width: 220px" v-model="updateForm.location"/>
          </el-form-item>
          
          
        </el-form>

        <el-button id="addbutton" type="primary" @click="update">
          确定
        </el-button>
        <el-button id="addbutton" type="primary" @click="updateview = false">
          取消
        </el-button>
      </el-dialog>

      <el-dialog v-model="addview">
        <el-form>
          <el-form-item label="菜品名称" :label-width="formLabelWidth" >
            <el-input v-model="updateForm.name"/>
          </el-form-item>

          <el-form-item label="位置" :label-width="formLabelWidth">
            <el-select  placeholder="在哪里" v-model="updateForm.location">
              <el-option label="新食堂" value="1" />
              <el-option label="老食堂" value="2" />
            </el-select>
          </el-form-item>
           <el-button id="addbutton" type="primary" @click="add">
          确定
      </el-button>
      <el-button id="addbutton" type="primary" @click="addview = false">
          取消
      </el-button>
        </el-form>
      </el-dialog>
</template>

<script>
 import axios from 'axios'
 import * as api from '@/api';
  
  export default{
    data(){
      return{
        updateview:false,
        addview:false,
        dishResult:'',
        updateForm: {
          id: null,
          name:'',
          location:null
        },
      }
    },
    mounted(){
    this.getlist()
  },
    methods:{
      //查看菜品评论
      view() {
        // this.$router.push({path: `/view/${id}`})
        this.$router.push({ //跳转页面
          path:"dishcomment"
        })
      },

      //登出，没写
      logout(){
        this.$router.replace({ //跳转页面
        path:"/"
          })
        },
        //根据id删除
        remove(ida){
          const deleteDish = api.getDishDeleteUrl(); 
          axios({
            method: 'post',
            url: deleteDish,
            data: {
             id : ida
            }
          })
          .then(response=>{
            this.dishResult=response.data.data;
          });
        },
        //展示数据
        getlist(){
        const SelectAllUrl =api.getDishSelectAllUrl();
        axios  //发送axios请求，请求数据
        .post(SelectAllUrl,{
        })
        .then(response=>{
          this.dishResult=response.data.data;
          console.log(this.dishResult);
        })
      },   
        //修改前获取数据
      beforeupdate(ida){
          const SelectByIdUrl =api.getDishSelectByIdUrl();
          axios({
            method: 'post',
            url: SelectByIdUrl,
            data: {
             id : ida
            }
          })
          .then(response=>{
            this.updateview=true
            console.log(response.data.data.location)
            this.updateForm.location=response.data.data.location
            this.updateForm.name=response.data.data.name
            this.updateForm.id=response.data.data.id
        });
      },

      //提交表单修改
     update(){
          const UpdateDishUrl =api.getDishUpdateDishUrl();
          axios({
            method: 'post',
            url: UpdateDishUrl,
            data: {
            id : this.updateForm.id,
             name : this.updateForm.name,
             location : this.updateForm.location
            }
          })
          .then(response=>{
            this.updateview=false
            
        });
      },
        //增加
      add(){
        const dishadddishurl=api.getDishAddDishUrl()
          axios({
            method: 'post',
            url: dishadddishurl,
            data: {
              name:this.updateForm.name,
              location:this.updateForm.location
            }
          })
          .then(response=>{
            this.dishResult=response.data.data;
            this.addview=false
          });
        },

        //查看评论
        findcomment(){
          const SelectByIdUrl =api.findcommentUrl();
          axios({
            method: 'post',
            url: SelectByIdUrl,
            data: {
             id : ida
            }
          })
          .then(response=>{
            this.updateview=true
            console.log(response.data.data.location)
            this.updateForm.location=response.data.data.location
            this.updateForm.name=response.data.data.name
            this.updateForm.id=response.data.data.id
        });
        }
  }
}
</script>